<template>
  <div class="home mainBox">
    <!--    <header>-->
    <!--      <div>欢迎您使用仓库管理系统，现在时间:{{ time }}</div>-->
    <!--    </header>-->
    <!-- 展示-->
    <div style="height: 80vh">
      <div class="top-box" style="height: 20vh">
        <el-row :gutter="10" style="margin-left: -20px; margin-right: -20px;">
          <el-col :xs="12" :sm="12" :lg="8"
                  class=""
                  style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
            <div class="grid-content bg-purple top-little card-panel ">
              <!--  左侧图标-->
              <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
                <svg t="1724033005067" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2341" width="48" height="48">
                  <path
                    d="M934.912 240.64L523.264 0l-409.6 239.616 410.624 237.568zM551.936 1013.76l409.6-239.616V295.936L551.936 532.48zM84.992 294.912v479.232l409.6 239.616V531.456l-409.6-236.544z m290.816 345.088l-194.56-111.616c-3.072-2.048-6.144-6.144-6.144-10.24v-64.512c0-9.216 9.216-14.336 17.408-10.24l194.56 111.616c3.072 2.048 6.144 6.144 6.144 10.24v64.512c0 9.216-9.216 14.336-17.408 10.24z"
                    fill="#38ADFF" p-id="2342"></path>
                </svg>
              </div>
              <!--右侧文字-->
              <div data-v-52f34677="" class="card-panel-description font-box">
                <div data-v-52f34677="" class="card-panel-text text-box">产品种类</div>
                <span data-v-52f34677="" class="card-panel-num num-box">{{ wuliaoNum }}</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="8"
                  class=""
                  style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
            <div class="grid-content bg-purple top-little card-panel ">
              <!--  左侧图标-->
              <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
                <svg t="1724033465864" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3413" width="48" height="48">
                  <path
                    d="M645.488 544c3.552 9.776 5.328 20.032 5.28 30.352v96.208c0.064 25.568-10.848 50.112-30.32 68.208-19.488 18.096-45.952 28.272-73.552 28.272h-70.976c-27.584 0-54.048-10.176-73.536-28.272-19.488-18.096-30.4-42.64-30.304-68.208v-96.208c-0.016-10.288 1.664-20.528 4.96-30.352C222 582.48 96 679.52 96 791.168v72.352c0.16 53.12 46.512 96.176 103.84 96.48h624.32c57.328-0.304 103.68-43.36 103.84-96.48v-72.352c0-112.48-126-208.688-281.344-247.168h-1.168z m-134-32C635.488 512 736 411.632 736 288.112 736 164.592 636.496 64 512.512 64 388.512 64 288 164.368 288 288.112S389.008 512 512.512 512h-1.024z"
                    fill="#089111" p-id="3414"></path>
                  <path
                    d="M512 544c-26.512 0-48 23.92-48 53.44v53.12c0 29.52 21.488 53.44 48 53.44s48-23.92 48-53.44v-53.12c0.016-14.192-5.024-27.792-14.016-37.824-8.8-9.648-20.56-15.232-32.912-15.616H512z"
                    fill="#089111" p-id="3415"></path>
                </svg>
              </div>
              <!--右侧文字-->
              <div data-v-52f34677="" class="card-panel-description font-box">
                <div data-v-52f34677="" class="card-panel-text text-box">客户总数</div>
                <span data-v-52f34677="" class="card-panel-num num-box">{{ kehuNum }}</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="8"
                  class=""
                  style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">
            <div class="grid-content bg-purple top-little card-panel ">
              <!--  左侧图标-->
              <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">
                <svg t="1724033966176" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4542" width="48" height="48">
                  <path
                    d="M1023.99802 894.588192c-10.04698-9.406981-20.670958-14.97497-30.206939-16.382967-47.871903-15.231969-77.439843-23.039953-61.695875-47.999903 69.05586-51.071897 71.615855-110.143777 61.695875-165.119666C974.847119 514.36596 824.958422 512.318964 817.535437 511.998965c-93.88781 0-161.919673 40.703918-184.575627 106.623784-35.391928 102.655792 27.903944 187.199622 53.439892 211.583573 25.535948 24.383951-46.079907 46.975905-91.775814 56.959885-64.895869 18.303963-69.37586 97.535803-67.391864 136.831723H49.40999A48.959901 48.959901 0 0 1 0.00209 974.58803V49.4079C0.00209 22.143955 21.378047 0 49.40999 0h925.18113C1001.855065 0 1023.99802 21.375957 1023.99802 49.4079V894.588192z m-12.542975 129.279738H606.718864a12.287975 12.287975 0 0 1-12.287976-12.222975v-36.287927c0-20.095959 16.191967-36.479926 36.095927-36.479926 49.087901 0 130.559736-40.959917 130.559736-84.479829v-12.095976c0-20.351959 0-23.039953-29.183941-52.671893a121.727754 121.727754 0 0 1-42.239914-92.479813c0-32.319935 12.415975-62.719873 34.943929-85.631827A117.695762 117.695762 0 0 1 809.151454 575.998836c31.871936 0 61.887875 12.607975 84.47983 35.519928 22.399955 22.911954 34.81593 53.311892 34.815929 85.631827 0 35.711928-15.359969 69.37586-42.239914 92.479813-29.055941 29.56794-29.055941 32.255935-29.055942 49.2799l-0.064 15.615969c0.128 43.519912 81.471835 84.351829 130.559736 84.351829 19.83996 0 36.031927 16.383967 36.031928 36.479926v36.287927a12.287975 12.287975 0 0 1-12.223976 12.287975zM761.407551 720.254544a12.159975 12.159975 0 0 0 7.295985-2.431995 12.479975 12.479975 0 0 0 2.559995-17.279965 48.895901 48.895901 0 0 1-9.407981-29.055941c0-23.039953 15.871968-43.007913 37.759924-47.551904a12.351975 12.351975 0 0 0-4.99199-24.319951c-33.151933 7.039986-57.279884 37.247925-57.279885 71.871855 0 15.871968 4.92799 31.039937 14.207972 43.711911a12.159975 12.159975 0 0 0 9.85598 5.05599z m-258.879477-293.119407a31.999935 31.999935 0 0 0 32.255935-31.614937 31.999935 31.999935 0 0 0-32.255935-31.743935h-83.327831l83.199831-82.047835a31.359937 31.359937 0 0 0 0-44.927909 32.639934 32.639934 0 0 0-45.503908 0L338.624405 353.279286 220.417644 236.799521a32.639934 32.639934 0 0 0-45.567907 0 31.359937 31.359937 0 0 0 0 44.927909l83.263831 82.047835h-77.887842a31.999935 31.999935 0 0 0-32.255935 31.743935 31.999935 31.999935 0 0 0 32.255935 31.679936h128.895739v63.486872h-128.959739a31.999935 31.999935 0 0 0-32.255935 31.679936 31.999935 31.999935 0 0 0 32.255935 31.807936h128.959739v73.98385a31.999935 31.999935 0 0 0 32.190935 31.743936 31.999935 31.999935 0 0 0 32.319935-31.743936v-73.91985H502.529074a31.999935 31.999935 0 0 0 32.255935-31.807936 31.935935 31.935935 0 0 0-32.255935-31.679936H373.632335v-63.487872H502.529074z"
                    fill="#efb336" p-id="4543"></path>
                </svg>
              </div>
              <!--右侧文字-->
              <div data-v-52f34677="" class="card-panel-description font-box">
                <div data-v-52f34677="" class="card-panel-text text-box">供应商总数</div>
                <span data-v-52f34677="" class="card-panel-num num-box">{{ gongNum }}</span>
              </div>
            </div>
          </el-col>
          <!--          <el-col :xs="12" :sm="12" :lg="6"-->
          <!--                  class=""-->
          <!--                  style="padding-left: 20px; padding-right: 20px;   margin-bottom: 32px;">-->
          <!--            <div class="grid-content bg-purple top-little card-panel ">-->
          <!--              &lt;!&ndash;  左侧图标&ndash;&gt;-->
          <!--              <div class="card-panel-icon-wrapper icon-people card-panel-icon-wrapper icon-people icon-box">-->
          <!--                <svg t="1724034532736" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
          <!--                     xmlns="http://www.w3.org/2000/svg" p-id="5651" width="48" height="48">-->
          <!--                  <path d="M512 512m-460.8 0a460.8 460.8 0 1 0 921.6 0 460.8 460.8 0 1 0-921.6 0Z" fill="#059490"-->
          <!--                        p-id="5652"></path>-->
          <!--                  <path-->
          <!--                    d="M732.6208 505.18528V819.2H298.16832V505.18528H209.92L512 204.8l302.08 300.38528h-81.4592zM293.15072 471.04h38.95808v314.01472h366.592V471.04h32.17408L512 254.29504z m300.30848 215.04h81.4592v81.92h-81.4592v-81.92z m-118.784 0h81.4592v81.92H474.66496v-81.92z m0-116.05504h81.4592v81.92H474.66496v-81.92zM355.87072 686.08h81.4592v81.92h-81.4592v-81.92z m0-116.05504h81.4592v81.92h-81.4592v-81.92z m0-116.04992h81.4592v81.92h-81.4592v-81.92z"-->
          <!--                    fill="#ffffff" p-id="5653"></path>-->
          <!--                </svg>-->
          <!--              </div>-->
          <!--              &lt;!&ndash;右侧文字&ndash;&gt;-->
          <!--              <div data-v-52f34677="" class="card-panel-description font-box">-->
          <!--                <div data-v-52f34677="" class="card-panel-text text-box">仓库总数</div>-->
          <!--                <span data-v-52f34677="" class="card-panel-num num-box">{{ cangNum }}</span>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </el-col>-->
        </el-row>
      </div>
      <!--存放表格-->
      <div class="top-box">
        <div class="font">
          <span>产品库存</span>
        </div>
        <el-table :data="inventoryInquiryList">
          <el-table-column label="id" align="center" prop="id" v-if="false"/>
          <!--        <el-table-column label="工单编码" align="center" prop="tag"/>-->
          <!--        <el-table-column label="订单编号" align="center" prop="nodeType"/>-->
          <!--        <el-table-column label="客户名称" align="center" prop="type"/>-->
          <!--        <el-table-column label="产品编号" align="center" prop="name"/>-->
          <el-table-column label="产品名称" align="center" prop="materialName"/>
          <!--        <el-table-column label="规格型号" align="center" prop="sort"/>-->
          <!--        <el-table-column label="单位" align="center" prop="configJson"/>-->

          <el-table-column label="产品编号" align="center" prop="materialCode"/>
          <!--      <el-table-column label="计划完成时间" align="center" prop="completionTime" width="180">-->
          <!--        <template slot-scope="scope">-->
          <!--          <span>{{ parseTime(scope.row.completionTime, '{y}-{m}-{d}') }}</span>-->
          <!--        </template>-->
          <!--      </el-table-column>-->
          <el-table-column label="库存数量" align="center" prop="inventoryDifference"/>
          <el-table-column label="产品单位" align="center" prop="unit"/>
          <!--          <el-table-column label="需求日期" align="center" prop="completionTime"/>-->
          <el-table-column label="负责人" align="center" prop="createUser"/>
        </el-table>
      </div>
      <!-- 快捷入口-->
      <div style="display: flex;margin-bottom: 10px;margin-top: 20px" class="my-box">
        <div class="routerBox">
          <div class="headerBox">
            <div>
              <svg t="1717127083331" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2244" width="19" height="19">
                <path
                  d="M857.856 0H55.296a53.248 53.248 0 0 0-51.2 53.248V230.4a51.2 51.2 0 0 0 102.4 0V106.496h708.352a102.4 102.4 0 0 1 102.4 102.4v606.464a102.4 102.4 0 0 1-102.4 102.4H105.984v-120.32a51.2 51.2 0 0 0-102.4 0V972.8a53.248 53.248 0 0 0 51.2 51.2h803.072A166.4 166.4 0 0 0 1024 858.368v-691.2A166.4 166.4 0 0 0 857.856 0z"
                  p-id="2245" fill="#1296db"></path>
                <path
                  d="M91.136 512a57.344 57.344 0 0 0 57.088 57.088h380.672l-103.68 103.68a53.248 53.248 0 0 0 75.264 75.264l198.144-198.4a52.992 52.992 0 0 0 0-75.264l-198.4-198.4a53.248 53.248 0 1 0-75.264 75.264l103.68 103.68H148.224A57.344 57.344 0 0 0 91.136 512z"
                  p-id="2246" fill="#1296db"></path>
              </svg>
            </div>
            <div class="text">快速跳转</div>
          </div>
          <div class="card-desc" style="margin-bottom: 10px;">快速跳转到应用页面</div>
          <div class="btnBox">
            <div>
              <el-button type="primary" size="medium" plain>
                <router-link to="InboundManagement/productionEceipt">生产入库管理</router-link>
              </el-button>
            </div>
            <div>
              <el-button type="primary" size="medium">
                <router-link to="OutboundManagement/pickingOutbound">领料出库管理</router-link>
              </el-button>
            </div>
            <div>
              <el-button type="primary" size="medium">
                <router-link to="wareManagement/migrationQuery">产品移库列表</router-link>
              </el-button>
            </div>
            <div>
              <el-button type="primary" size="medium">
                <router-link to="InhouseQueries/inventoryInquiry">库存查询列表</router-link>
              </el-button>
            </div>
          </div>
        </div>
        <div id="main" style="width: 80%;height: 50vh;background-color:white;margin-left: 10px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDate} from "@/utils/getTime";
import {getecharts, getIssue} from "@/api";
import {
  addInventoryInquiry, delInventoryInquiry,
  getInventoryInquiry,
  listInventoryInquiry,
  updateInventoryInquiry
} from "@/api/wareManagement/inventoryInquiry";
import {listMaterialManagement} from "@/api/basicData/materialManagement";
import {listCustomerList} from "@/api/basicData/customerList";
import {listSupplierMasterData} from "@/api/basicData/supplierMasterData";
import {listWarehouseManagement} from "@/api/basicData/warehouseManagement";
import * as echarts from 'echarts'

export default {
  name: "Index",
  data() {
    return {
      stepReportConfigList: [],
      wuliaoNum: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存查询表格数据
      inventoryInquiryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        materialCode: null,
        materialName: null,
        materialNumber: null,
        reservoirNumber: null,
        nventoryQuantity: null,
        unit: null,
        batchNumber: null,
        stockStatus: null,
        productionDate: null,
        validDays: null,
        validity: null,
        supplierName: null,
        rderNumber: null,
        createUser: null,
        lastUpdater: null,
        lastUpdateTime: null
      },
      //产品id
      idD: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        materialCode: [
          {required: true, message: "产品编码不能为空", trigger: "blur"}
        ],
      },
      time: '',
      //   入库综述
      issueNum: "",
      kehuNum: null,
      gongNum: null,
      cangNum: null,
      oneList: null,
    };
  },
  computed: {
    filteredInventoryInquiryList() {
      return this.inventoryInquiryList.filter(row => {
        return row.minimumStock !== null && row.maximumInventory !== null && row.inventoryDifference > row.maximumInventory;
      });
    }
  },
  created() {
    //console.log(this.filteredInventoryInquiryList.length)
    // this.jinggao()
    // 动态获取当前时间
    setInterval(() => {
      this.time = getDate()
    }, 1000)
    this.getissueNum()
    this.getListWuliao()
  },
  mounted() {
    this.oneChart = echarts.init(document.getElementById('main'));
    this.getOnedata()
    this.jinggao()
    this.getwuliaoList();
    this.getkehuList();
    this.getgongList()
    this.getcangList()
  },
  methods: {
    getListWuliao() {
      listInventoryInquiry(this.queryParams).then(response => {
        this.inventoryInquiryList = response.rows;
        console.log(this.inventoryInquiryList, '111')
      });
    },
    getOnedata() {
      getecharts().then(res => {
        this.oneList = res.rows
        this.initPriceChart(this.oneList)
      })
    },
    initPriceChart(data) {
      // let myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      this.oneChart.setOption({
        title: {
          text: '产品数量变化'
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.productionMonth)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.map(item => item.totalProduction),
          type: 'line',
          smooth: true
        }],
        emphasis: {label: {show: true, position: 'top'}},
        // 也可以多加一些属性
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
      })
    },
    // 警告
    jinggao() {
      if (this.filteredInventoryInquiryList.length == 0) {
        return null
      } else {
        this.$notify({
          title: '警告',
          message: '存在超出库存产品！',
          type: 'warning',
          offset: 100,
          onClick: () => {
            this.$router.push({path: '/InhouseQueries/inventyujing'});
          },
          // 这里这里这里
          // 跳转预警页面
          // defineCallBack() {
          //   this.$router.push({ path: '/wareManagement/inventyujing' });
          //   //console.log('message');
          // },
        });
      }
    },
    getcangList() {
      listWarehouseManagement().then(response => {
        this.cangNum = response.total
      });
    },
    getkehuList() {
      listCustomerList().then(response => {
        this.kehuNum = response.total
      });
    },
    getgongList() {
      listSupplierMasterData(this.queryParams).then(response => {
        this.gongNum = response.total
      });
    },
    getwuliaoList() {
      listMaterialManagement().then(response => {
        this.wuliaoNum = response.total
        const materialManagementList = response.rows;
        this.idD = materialManagementList.map(item => item.materialId);
        this.idD = this.idD.join("，")
        // //console.log("idsss", this.idD); // 使用 this.idD
        if (this.idD.length) {
          this.getList();
        }
      });
    },
    aa(value) {
      this.queryParams.nventoryQuantity = value.replace(/\D/g, '');
    },
    cc(value) {
      this.form.nventoryQuantity = value.replace(/\D/g, '');
    },
    bb(value) {
      this.queryParams.validDays = value.replace(/\D/g, '');
    },
    dd(value) {
      this.form.validDays = value.replace(/\D/g, '');
    },
    /** 查询库存查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.materialId = this.idD
      // //console.log("898989898989898", this.queryParams)
      listInventoryInquiry(this.queryParams).then(response => {
        this.inventoryInquiryList = response.rows;
        // //console.log('list', response)
        this.total = response.total;
        this.loading = false;

      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        inquiryId: null,
        materialCode: null,
        materialName: null,
        materialNumber: null,
        reservoirNumber: null,
        nventoryQuantity: null,
        unit: null,
        batchNumber: null,
        stockStatus: null,
        productionDate: null,
        validDays: null,
        validity: null,
        supplierName: null,
        rderNumber: null,
        createUser: null,
        createTime: null,
        lastUpdater: null,
        lastUpdateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.inquiryId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库存查询";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const inquiryId = row.inquiryId || this.ids
      getInventoryInquiry(inquiryId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改库存查询";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.inquiryId != null) {
            updateInventoryInquiry(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInventoryInquiry(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const inquiryIds = row.inquiryId || this.ids;
      this.$modal.confirm('是否确认删除库存查询编号为"' + inquiryIds + '"的数据项？').then(function () {
        return delInventoryInquiry(inquiryIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 获取出库总数
    getissueNum() {
      getIssue().then(res => {
        // //console.log(res)
        this.issueNum = res.data
      })
    }
  },
};
</script>

<style scoped lang="scss">
.btnBox {
  width: 100%;
  margin: 0 auto;
  padding: 0 10%;
  margin-left: 20px;
}

@media (max-width: 800px) {
  .my-box {
    display: none !important;
  }
}

.font {
  margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 20px;
}

.btnBox > div {
  margin-bottom: 20px;
}

.routerBox {
  width: 25%;
  padding: 10px;
  background-color: white;
}

.top-box {
  margin-top: 10px;
  margin-left: -20px;
  margin-right: -20px;
  background-color: white;
}

.one {
  background-color: white;
  width: 80% !important;
}

.hiddenBox {
  .salesBox {
    main {
      display: block;
    }
  }

}

.iphone {
  margin: 0 auto;
  font-size: 26px;
  font-weight: 700;
  color: red;
  height: 50vh;
  //line-height: 50vh;
}


.customerBox {
  //box-shadow: 5px 5px 6px 5px rgba(0, 0, 0, 0.1);
  height: 80px;
  padding: 10px;
  margin: 10px;
  width: 45%;
}

.customerBox span {
  color: blue;
  font-size: 18px;
  font-weight: 700;
  margin: 0 3px;
}

.allNum {
  display: flex;
  height: 70vh;
}

.title {
  font-size: small;
  font-weight: 400;
  margin-bottom: 10px;

}

.customerAll {
  // font-weight: 500;
  border-bottom: 1px dashed #efefef;
  padding: 10px 20px;
  font-size: 14px;
  padding-right: 5px;
}

.textBox {
  span {
    font-size: 18px;
    font-weight: 700;
    margin: 0 3px;
  }

}

.card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1;
  // margin-bottom: 10px;
  // margin: 10px 0;
}

.whiteBox {
  margin-right: 20px;
  width: 400px;
  padding: 10px;
  background-color: white;
}

.headerBox {
  margin-bottom: 10px;
  height: 20px;
  display: flex;
}


.bigbox {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 15px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.numBox {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-top: 8px;
  margin-right: 5px;
}

.littletitile {
  font-size: 13px;
}

.flexbox {
  //box-shadow: 8px 8px 10px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  height: 80px;
  padding: 10px;
  margin: 10px;
  width: 24%;

  .iconbox {
    width: 36px;
    height: 36px;
    line-height: 44px;
    border-radius: 50%;
    background-color: rgb(35, 98, 251);
  }
}

.salesBox {
  padding: 10px;
  background-color: white;
  margin-bottom: 20px;

  header {
    margin-bottom: 10px;
    height: 20px;
    display: flex;


  }

}

.text {
  font-size: 16px;
  font-weight: 700;
  margin-left: 10px;
}

.home {
  //background-color: whitesmoke;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  // font-size: 13px;
  // color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

* {
  margin: 0;
}

main {
  display: flex;
  justify-content: space-between;
  //background-color: white;

  .cellBox {
    color: white;
    //background-color: #42b983;
    display: flex;
    justify-content: space-between;
    width: 22%;
    padding: 10px;
    background-color: white;

    .headerBox {
      display: flex;

      .title {
        margin-left: 20px;
      }
    }
  }
}

.mainBox {
  height: 100%;
  padding: 10px;
  background-color: whitesmoke;
}

header {
  margin-bottom: 10px;
  //height: 10vh;
  width: 100vw;
  background-color: white;

  div {
    padding: 20px;
    //height: 40px;
    //line-height: 40px;
  }
}

.font {
  margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 20px;
}

//* {
//  margin: 0;
//  padding: 0;
//  box-sizing: border-box;
//}

.text-box {
  line-height: 18px;
  color: rgba(0, 0, 0, .45);
  font-size: 16px;
  margin-bottom: 12px;
}

.num-box {
  font-size: 20px;
}

.icon-box {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.font-box {
  float: right;
  font-weight: 700;
  margin: 26px;
  margin-left: 0;
}

.panel-group .card-panel .card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.top-little {
  //padding: 0 20px;
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}

.main {
  background-color: rgb(239, 241, 244);
  padding: 32px;
}

.top-box {
  margin-top: 10px;
  //margin-left: -20px;
  //margin-right: -20px;
  //background-color: white;
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  //background: #99a9bf;
}

.bg-purple {
  //background: #d3dce6;
}

.bg-purple-light {
  //background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.panel-group .card-panel .card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  -webkit-transition: all .38s ease-out;
  transition: all .38s ease-out;
  border-radius: 6px;
}

.panel-group .card-panel .icon-people {
  color: #40c9c6;
}

.panel-group .card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}
</style>

